<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <school></school>
    </div>
</body>

</html>
<script>

    const school = Vue.extend({
        name: 'school',
        template:
            `
            <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
             
            </div>
             `,
        data() {
            return {
                name: '尚硅谷',
                address: '北京'
            }
        },

    })
    const hello = Vue.extend({
        template: `<h2>{{msg}}</h2>`,
        data() {
            return {
                msg: '你好啊'
            }
        }
    })
    console.log('@', school);
    console.log('#', hello);

    new Vue({
        el: '#root',
        components: {
            school
        }
    })
</script>
<!-- 
    关于VueComponent
        1. school组件本质上是名为VueComponent的构造函数, 且不是程序员定义的, 是Vue.extend生成的
        2. 我们只需要写</school>或<school></school>, Vue解析时会帮我们创建school组件的实例对象
            即Vue帮我们执行的: new VueComponent(options)
        3. 特别注意: 每次调用Vue.extend, 返回的都是一个全新的VueComponent!!!
        4. 关于this指向:
            a. 组件配置中:
                data函数, methods中的函数, watch中的函数, computed中的函数, 它们的this均是[VueComponent实例对象]
            b. new Vue()配置中
                data函数, methods中的函数, watch中的函数, computed中的函数, 它们的this均是[Vue实例对象]
        5. VueComponent的实例对象, 以后简称vc(也可称之为: 组件实例对象)
            Vue的实例对象, 以后简称vm
 -->